<template>
  <div class="login" >
    <div v-if="$store.state.isLogin === false">
      <form class="form-box">
        <h1>Login</h1>
        <label><input v-model="user.username" type="text" placeholder="Username" class="username"></label>
        <label><input v-model="user.password" type="password" placeholder="Password" class="password"></label>
        <button type="button" @click="click_login" class="login">Login</button>
        <router-link to="/regis"><button type="button" class="register">Register</button></router-link>
      </form>
    </div>
    <div v-else class="show">
      <button type="button" @click="click_logout" class="logout">您已登录，点击退出登录</button>
    </div>
  </div>
</template>


<script>
import qs from "qs";
export default {
  data() {
    return {
      user:{username:null,password:null}
    }
  },
  mounted: function(){
    this.loadUser();//需要触发的函数
  },
  methods: {
    
    click_login() {
      if(this.user.username === null || this.user.password === null){
          alert("账户名或密码为空");
      }
      else{
          // this.$store.state.isLogin = true;
          // this.$store.state.username = this.user.username;
          this.$axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded';
          this.$axios({
            method: 'post',              /* 指明请求方式，可以是 get 或 post */
            url: '/login',      /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
            data: qs.stringify({        /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
              uid: this.user.username,
              password:this.user.password
            })
          })
          .then(result => {                  /* res 是 response 的缩写 */
            console.log(result.data);
            if (result.data.errno == 0) {      /* res.data 是后端返回的数据对象 */
              alert("登陆成功");
              this.$store.isLogin = true;
              this.$store.user =  this.user;
              this.$router.push({ path: '/', query: { username:this.user.username} });
              localStorage.setItem('user',JSON.stringify(this.user));
            }
            else
              alert("用户不存在！");
          })
          .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
            console.log(err);
          })   
      }
    },
    // click_register(){
    //   this.$router.push({ path:'/regis'})
    // },
    click_logout(){
      if(confirm("确认退出？")){
        this.$axios({
            method: 'post',              /* 指明请求方式，可以是 get 或 post */
            url: '/logout'
        })
        .then(res=>{
          console.log(res.data);
          this.$store.state.isLogin = false;
          localStorage.removeItem("user");
        })
        .catch(err => {                 /* 请求若出现路由找不到等其它异常，则在终端输出错误信息 */
            console.log(err);
        })   
      }
        
    },
    loadUser(){
      // const user =  JSON.parse(localStorage.getItem('user'));
      // if( user != null){
      //   this.$store.state.isLogin = true;
      //   this.user = user;
      //   this.$store.state.username = this.user.username;
      // }
      // this.user.username=null;
      // this.user.password=null;
    }
    // click_login() {
    //   this.$axios({
    //     method: 'post',           /* 指明请求方式，可以是 get 或 post */
    //     url: '/user/login',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    //     data: qs.stringify({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
    //       username: this.username,
    //       password: this.password
    //     })
    //   })
    //   .then(res => {              /* res 是 response 的缩写 */
    //     console.log(res);
    //     switch (res.data.status_code) {
    //       case 200:
    //         window.alert("登录成功！");
    //         /* 将后端返回的 user 信息使用 vuex 存储起来 */
    //         this.$store.dispatch('saveUserInfo', {
    //           user: {
    //             'username': res.data.username,
    //             'token': res.data.token,
    //             'userId': res.data.user_id
    //           }
    //         });
    //         break;
    //       case 401:
    //         window.alert("用户名不存在！");
    //         break;
    //       case 402:
    //         window.alert("密码错误！");
    //         break;
    //     }
    //   })
    //   .catch(err => {
    //     alert(err);         /* 若出现异常则在终端输出相关信息 */
    //   })
    //}
  }
}
</script>

<style>
.show{
  position:relative;
}
.form-box {
    width: 300px;
    padding: 40px;  /* 内边界宽度  */
    position: absolute;  /* 设置为绝对定位，使下方的top和left生效  */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);  /* 作用见后方描述  */
    background: #90b9e5;  /* 设置背景颜色  */
    text-align: center;  /* 表单中内容居中  */
    border-radius: 10px;
}
.form-box h1 {
  text-transform: uppercase;  /* 将字体全部设置成大写字母  */
}
.form-box .username, .form-box .password {
  border-radius: 24px;  /* 边框四个角的弧度  */
  border: 2px solid #3498db;  /* 边框厚度和颜色  */
  background: none;
  display: block;
  margin: 20px auto;  /* 外边界  */
  text-align: center;
  padding: 14px 10px;  /* 内边界  */
  width: 200px;
  outline: none;
  /*color: white;      设置输入框中竖线的颜色 */
  transition: 0.25s;   /* 设置元素过渡效果 */
}
.form-box .username:focus,.form-box .password:focus{
  border-color: black;  /* 边框颜色  */
}
.form-box .login,
.form-box .register{
  display: inline-block;
  width: 120px;
  text-align: center;
  border-radius: 24px;
  border: 2px solid #0b95f1;
  background: none;
  margin: 20px 10px;
  padding: 14px 0px;
  outline: none;
  transition: 0.25s;
  cursor: pointer;    /* 设置光标的样式 */
}
.logout{
  display: inline-block;
  border-radius: 24px;
  border: 2px solid #0b95f1;
  background: none;
  margin: 20px auto;
  padding: 14px 40px;
  outline: none;
  transition: 0.25s;
  cursor: pointer;    /* 设置光标的样式 */
}
</style>